<template>
  <div class="index">
        <h1>你好！</h1>
        <p class="text">
            尊敬的
            <span style="color:red">{{menberInfo}}用户</span>,欢迎来到菜鸟联盟！
        </p>

        <card v-for="item in this.$courseData" :key="item.id"
            :courseImgUrl=item.imgUrl       
            :courseTitle=item.title 
            :courseNum=item.num 
            :courseType=item.type 
            @goVideoList="goVideoList(item)"></card>
              
        <van-button round block   @click="recharge">充值</van-button>
  </div>

</template>

<script>

import card from "../components/card.vue";
import {mapGetters} from 'vuex'
export default {    
    components:{
        card
    },
    data(){
        return{
           courseList : ''
        }
    },
    computed:{
        ...mapGetters(['menberInfo'])
    },
    methods:{
        
        recharge(){
            this.$toast.clear()
            this.$router.push('./userCenter')
        },
        goVideoList(e){
            if(this.checkPermission(e)){
                this.$toast.clear()
                this.$router.push({
                    name:'course',
                    params: {id:e.id} 
                })
            }else{
                this.$toast({
                    type:'fail',
                    message: '权限不足',
                    transition:'index-van-fade-leave-active'
                });             
            }
            
        },
        checkPermission(e){
            const userStatus = this.$store.state.userStatus;
            const vipLevel = this.$store.state.vipLevel;

            if(userStatus >= e.userStatus){
                if(vipLevel >= e.vipLevel){
                    return true
                }else{
                    return false
                }
            }else{
                return false
            }
        }
    },
    created(){
        this.$toast.clear(true);
    },
    mounted(){

    }
}
</script>

<style lang='scss' scoped>
@function p2r($px){
    @return ($px/40px)*1rem
}
.index{
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   padding: p2r(80px) p2r(40px) p2r(140px);
   box-sizing: border-box;
   text-align: left;
   h1{
       font-size: p2r(50px);
       font-weight: bold;
       margin-bottom: p2r(60px);
   }
   .text{
       font-size: p2r(32px);
       margin-bottom: p2r(40px);
   }
   .btn{
     width: 100%;
     margin-top: p2r(30px);
   }
}

</style>